<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm"
		:size="formSize" status-icon>
		<el-upload v-model:file-list="fileList" class="upload-demo"
			action="http://localhost:5099/api/Files/Upload/FormImg" :on-preview="handlePreview"
			:on-remove="handleRemove" list-type="picture" name="files" :on-success="successHandle">
			<el-button type="primary">上传产品图片</el-button>
		</el-upload>
		<el-form-item label="产品名称" prop="ProductName">
			<el-input v-model="ruleForm.ProductName" />
		</el-form-item>
		<el-form-item label="产品价格" prop="ProductPrice">
			<el-input v-model="ruleForm.ProductPrice" />
		</el-form-item>
		<el-form-item label="状态" prop="Status">
			<el-select-v2 v-model="ruleForm.Status" placeholder="请选择状态" :options="optionsStatus" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>
<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import type { ComponentSize, FormInstance, FormRules,UploadUserFile,UploadProps } from 'element-plus'
	import { ElNotification } from 'element-plus'
	import productinfoapi from "../../api/productinfoapi"

	const props = defineProps({
		Id: Number,
	});
	const emit = defineEmits(['onSave'])

	interface RuleForm {
		ProductName : string
		ProductPrice : string
		ProductPict : string
		Status : number
	}


	const handleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
	}

	const handlePreview : UploadProps['onPreview'] = (file) => {
		console.log(file)
	}
	
	
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = ref<RuleForm>({

		ProductName: '',
		ProductPrice: '',
		ProductPict: '',
		Status: 1,

	})
	const fileList = ref<UploadUserFile[]>([
			
	])
	const successHandle = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles)=>{
		console.log(response);
		ruleForm.value.ProductPict=response.data[0];
	}
	const optionsStatus = [
		{
			value: 1,
			label: "正常",
		},
		{
			value: 0,
			label: "删除",
		},
		{
			value: -1,
			label: "禁用",
		}
	]

	const getData = () => {
		productinfoapi.get(props.Id).then(res => {
			console.log("aaa=", res.data);
			ruleForm.value = res.data
			fileList.value.push(
			{
				url:"http://localhost:5099/wwwroot/images/"+ruleForm.value.ProductPict,
				name:ruleForm.value.ProductPict
			}
			)
			
		})
	}
	onMounted(() => {
		getData();
	})
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log("ruleForm.data", ruleForm)

				productinfoapi.put(props.Id, ruleForm.value).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '修改成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>

<style>
</style>